<template>
  <div class="analysis-container">
    <h1 class="page-title">教学数据分析</h1>

    <div class="data-filters">
      <el-select v-model="selectedClass" placeholder="选择班级" class="filter-select">
        <el-option v-for="item in classesList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="dateShortcuts"
        class="date-range"
      />

      <el-button type="primary" @click="applyFilters">应用筛选</el-button>
      <el-button @click="exportData">导出数据</el-button>
    </div>

    <div class="analysis-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.totalStudents }}</div>
              <div class="stat-label">参与学生数</div>
            </div>
            <el-progress
              :percentage="overviewData.participationRate"
              :format="(p: number) => p + '%'"
              :color="progressColors.participation"
            />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.completionRate }}%</div>
              <div class="stat-label">平均完成率</div>
            </div>
            <el-progress
              :percentage="overviewData.completionRate"
              :color="progressColors.completion"
            />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.avgScore.toFixed(1) }}</div>
              <div class="stat-label">平均分数</div>
            </div>
            <el-progress
              :percentage="(overviewData.avgScore / 100) * 100"
              :color="progressColors.score"
            />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-value">{{ overviewData.totalTime }}</div>
              <div class="stat-label">总学习时长(小时)</div>
            </div>
            <div class="trend-indicator">
              <el-icon v-if="overviewData.timeGrowth > 0" color="#67C23A"><ArrowUp /></el-icon>
              <el-icon v-else-if="overviewData.timeGrowth < 0" color="#F56C6C"
                ><ArrowDown
              /></el-icon>
              <span
                :class="{
                  'trend-up': overviewData.timeGrowth > 0,
                  'trend-down': overviewData.timeGrowth < 0,
                }"
                >{{ Math.abs(overviewData.timeGrowth) }}%</span
              >
              <span class="trend-period">较上周期</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>学习进度分布</span>
                <el-radio-group v-model="progressChartType" size="small">
                  <el-radio-button label="pie">饼图</el-radio-button>
                  <el-radio-button label="bar">柱状图</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container" id="progress-chart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>成绩分布</span>
              </div>
            </template>
            <div class="chart-container" id="score-chart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="chart-row">
        <el-col :span="24">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>学习活跃度趋势</span>
                <el-select v-model="activityMetric" size="small" style="width: 140px">
                  <el-option label="在线时长" value="time" />
                  <el-option label="登录次数" value="logins" />
                  <el-option label="资源访问量" value="resources" />
                </el-select>
              </div>
            </template>
            <div class="chart-container" id="activity-chart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="chart-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>知识点掌握情况</span>
              </div>
            </template>
            <div class="chart-container" id="knowledge-chart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>题型正确率对比</span>
              </div>
            </template>
            <div class="chart-container" id="question-types-chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="student-performance">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>学生表现详情</span>
            <div class="header-actions">
              <el-input
                v-model="studentSearch"
                placeholder="搜索学生"
                prefix-icon="el-icon-search"
                clearable
                class="search-input"
              />
            </div>
          </div>
        </template>

        <el-table
          :data="filteredStudentData"
          style="width: 100%"
          border
          stripe
          :default-sort="{ prop: 'score', order: 'descending' }"
        >
          <el-table-column prop="name" label="学生姓名" sortable />
          <el-table-column prop="studentId" label="学号" width="120" />
          <el-table-column prop="completion" label="完成度" width="150" sortable>
            <template #default="scope">
              <el-progress
                :percentage="scope.row.completion"
                :format="(p: number) => p + '%'"
                :color="getProgressColor(scope.row.completion)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="score" label="得分" width="100" sortable />
          <el-table-column prop="activityTime" label="学习时长(小时)" width="150" sortable />
          <el-table-column prop="lastActive" label="最近活跃" width="180" sortable />
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <el-button size="small" @click="viewStudentDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 学生详情抽屉 -->
    <el-drawer
      v-model="studentDetailDrawer"
      :title="`${selectedStudent?.name} 的学习详情`"
      direction="rtl"
      size="50%"
    >
      <div v-if="selectedStudent" class="student-detail">
        <div class="student-detail-header">
          <div class="student-avatar">
            <el-avatar :size="80" :src="selectedStudent.avatar">
              {{ selectedStudent.name.charAt(0) }}
            </el-avatar>
          </div>
          <div class="student-info">
            <h3>{{ selectedStudent.name }}</h3>
            <p>学号: {{ selectedStudent.studentId }}</p>
            <p>班级: {{ selectedStudent.className }}</p>
          </div>
          <div class="student-stats">
            <div class="stat-item">
              <div class="stat-value">{{ selectedStudent.score }}</div>
              <div class="stat-label">总分</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ selectedStudent.completion }}%</div>
              <div class="stat-label">完成度</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ selectedStudent.activityTime }}</div>
              <div class="stat-label">学习时长(小时)</div>
            </div>
          </div>
        </div>

        <el-divider content-position="left">学习进度</el-divider>

        <div class="student-progress">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in selectedStudent.activities"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
              :color="activity.color"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>

        <el-divider content-position="left">知识点掌握情况</el-divider>

        <div class="knowledge-mastery">
          <div
            v-for="(item, index) in selectedStudent.knowledgePoints"
            :key="index"
            class="knowledge-item"
          >
            <div class="knowledge-name">{{ item.name }}</div>
            <el-progress
              :percentage="item.mastery"
              :status="
                item.mastery >= 80 ? 'success' : item.mastery >= 60 ? 'warning' : 'exception'
              "
            />
          </div>
        </div>

        <el-divider content-position="left">建议</el-divider>

        <div class="recommendations">
          <el-alert
            v-for="(rec, index) in selectedStudent.recommendations"
            :key="index"
            :title="rec.title"
            :type="rec.type"
            :description="rec.description"
            show-icon
            class="recommendation-item"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const route = useRoute()
const taskId = route.params.id

// 学生类型定义
interface Student {
  id: string
  name: string
  studentId: string
  avatar: string
  className: string
  completion: number
  score: number
  activityTime: number
  lastActive: string
  activities: Array<{
    content: string
    time: string
    type: string
    color: string
  }>
  knowledgePoints: Array<{
    name: string
    mastery: number
  }>
  recommendations: Array<{
    title: string
    type: string
    description: string
  }>
}

// 图表实例
let progressChart: echarts.ECharts | null = null
let scoreChart: echarts.ECharts | null = null
let activityChart: echarts.ECharts | null = null
let knowledgeChart: echarts.ECharts | null = null
let questionTypesChart: echarts.ECharts | null = null

// 数据筛选
const selectedClass = ref('')
const dateRange = ref([])
const studentSearch = ref('')

// 图表控制
const progressChartType = ref('pie')
const activityMetric = ref('time')

// 概览数据
const overviewData = ref({
  totalStudents: 42,
  participationRate: 92,
  completionRate: 78,
  avgScore: 83.5,
  totalTime: 256,
  timeGrowth: 12,
})

// 进度条颜色
const progressColors = {
  participation: [
    { color: '#f56c6c', percentage: 50 },
    { color: '#e6a23c', percentage: 75 },
    { color: '#5cb87a', percentage: 100 },
  ],
  completion: [
    { color: '#f56c6c', percentage: 50 },
    { color: '#e6a23c', percentage: 75 },
    { color: '#5cb87a', percentage: 100 },
  ],
  score: [
    { color: '#f56c6c', percentage: 60 },
    { color: '#e6a23c', percentage: 80 },
    { color: '#5cb87a', percentage: 100 },
  ],
}

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 班级列表
const classesList = ref([
  { id: '1', name: '高一(1)班' },
  { id: '2', name: '高一(2)班' },
  { id: '3', name: '高一(3)班' },
  { id: '4', name: '高二(1)班' },
  { id: '5', name: '高二(2)班' },
])

// 学生数据
const studentData = ref([
  {
    id: '1',
    name: '张三',
    studentId: '20230001',
    avatar: '',
    className: '高一(1)班',
    completion: 95,
    score: 92,
    activityTime: 25.5,
    lastActive: '2023-11-05 14:30:22',
    activities: [
      {
        content: '完成了《数据结构》单元测试',
        time: '2023-11-05 14:30:22',
        type: 'success',
        color: '#67C23A',
      },
      {
        content: '阅读了课程资料《算法设计基础》',
        time: '2023-11-04 10:15:43',
        type: 'primary',
        color: '#409EFF',
      },
      {
        content: '观看了视频教程《排序算法》',
        time: '2023-11-03 16:45:12',
        type: 'primary',
        color: '#409EFF',
      },
      {
        content: '提交了编程作业《链表实现》',
        time: '2023-11-02 09:20:36',
        type: 'warning',
        color: '#E6A23C',
      },
    ],
    knowledgePoints: [
      { name: '数据类型', mastery: 96 },
      { name: '条件语句', mastery: 90 },
      { name: '循环结构', mastery: 88 },
      { name: '函数定义', mastery: 92 },
      { name: '算法复杂度', mastery: 75 },
    ],
    recommendations: [
      {
        title: '建议复习算法复杂度分析',
        type: 'warning',
        description: '该知识点掌握率较低，建议重点复习相关章节并完成练习题。',
      },
      {
        title: '推荐进阶学习',
        type: 'success',
        description: '基础知识点掌握良好，可以尝试更高级的算法设计与应用课程。',
      },
    ],
  },
  {
    id: '2',
    name: '李四',
    studentId: '20230002',
    avatar: '',
    className: '高一(1)班',
    completion: 67,
    score: 75,
    activityTime: 18.2,
    lastActive: '2023-11-04 09:15:36',
    activities: [
      {
        content: '完成了《数据结构》单元测试',
        time: '2023-11-04 09:15:36',
        type: 'warning',
        color: '#E6A23C',
      },
      {
        content: '阅读了课程资料《算法设计基础》',
        time: '2023-11-03 11:30:22',
        type: 'primary',
        color: '#409EFF',
      },
      {
        content: '提交了编程作业《链表实现》',
        time: '2023-11-01 15:42:18',
        type: 'danger',
        color: '#F56C6C',
      },
    ],
    knowledgePoints: [
      { name: '数据类型', mastery: 82 },
      { name: '条件语句', mastery: 78 },
      { name: '循环结构', mastery: 65 },
      { name: '函数定义', mastery: 70 },
      { name: '算法复杂度', mastery: 55 },
    ],
    recommendations: [
      {
        title: '需要加强循环结构练习',
        type: 'warning',
        description: '循环结构掌握不够熟练，建议多做相关练习题。',
      },
      {
        title: '算法复杂度需要重点关注',
        type: 'danger',
        description: '该知识点掌握不足，建议观看教学视频并咨询老师。',
      },
    ],
  },
  {
    id: '3',
    name: '王五',
    studentId: '20230003',
    avatar: '',
    className: '高一(1)班',
    completion: 85,
    score: 88,
    activityTime: 22.7,
    lastActive: '2023-11-05 11:45:08',
    activities: [
      {
        content: '完成了《数据结构》单元测试',
        time: '2023-11-05 11:45:08',
        type: 'success',
        color: '#67C23A',
      },
      {
        content: '阅读了课程资料《算法设计基础》',
        time: '2023-11-04 16:20:33',
        type: 'primary',
        color: '#409EFF',
      },
      {
        content: '观看了视频教程《排序算法》',
        time: '2023-11-03 14:10:55',
        type: 'primary',
        color: '#409EFF',
      },
    ],
    knowledgePoints: [
      { name: '数据类型', mastery: 90 },
      { name: '条件语句', mastery: 88 },
      { name: '循环结构', mastery: 85 },
      { name: '函数定义', mastery: 82 },
      { name: '算法复杂度', mastery: 78 },
    ],
    recommendations: [
      {
        title: '可以尝试更多实战项目',
        type: 'success',
        description: '基础知识掌握较好，建议参与实战项目来巩固和提升。',
      },
    ],
  },
])

// 学生详情
const studentDetailDrawer = ref(false)
const selectedStudent = ref<Student | null>(null)

// 计算属性
const filteredStudentData = computed(() => {
  if (!studentSearch.value) return studentData.value

  const query = studentSearch.value.toLowerCase()
  return studentData.value.filter(
    (student) =>
      student.name.toLowerCase().includes(query) || student.studentId.toLowerCase().includes(query),
  )
})

// 方法
const applyFilters = () => {
  // 实际项目中这里会调用API获取筛选后的数据
  console.log('应用筛选:', {
    classId: selectedClass.value,
    dateRange: dateRange.value,
  })

  ElMessage.success('数据已更新')
  // 重新渲染图表
  initCharts()
}

const exportData = () => {
  ElMessage.success('数据导出中，请稍候...')
  // 实际项目中这里处理数据导出
}

const viewStudentDetail = (student: any) => {
  selectedStudent.value = student
  studentDetailDrawer.value = true
}

const getProgressColor = (value: number) => {
  if (value < 60) return '#F56C6C'
  if (value < 80) return '#E6A23C'
  return '#67C23A'
}

// 图表初始化
const initCharts = () => {
  // 确保DOM元素已经存在
  if (
    !document.getElementById('progress-chart') ||
    !document.getElementById('score-chart') ||
    !document.getElementById('activity-chart') ||
    !document.getElementById('knowledge-chart') ||
    !document.getElementById('question-types-chart')
  ) {
    console.error('Chart DOM elements not found. Will retry on nextTick.')
    nextTick(() => {
      setTimeout(() => {
        initCharts()
      }, 100)
    })
    return
  }

  // 销毁旧图表
  if (progressChart) progressChart.dispose()
  if (scoreChart) scoreChart.dispose()
  if (activityChart) activityChart.dispose()
  if (knowledgeChart) knowledgeChart.dispose()
  if (questionTypesChart) questionTypesChart.dispose()

  // 初始化新图表
  try {
    progressChart = echarts.init(document.getElementById('progress-chart'))
    scoreChart = echarts.init(document.getElementById('score-chart'))
    activityChart = echarts.init(document.getElementById('activity-chart'))
    knowledgeChart = echarts.init(document.getElementById('knowledge-chart'))
    questionTypesChart = echarts.init(document.getElementById('question-types-chart'))

    console.log('Charts initialized successfully')

    // 进度分布图表
    if (progressChartType.value === 'pie') {
      progressChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已完成', '进行中', '未开始'],
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 65, name: '已完成', itemStyle: { color: '#67C23A' } },
              { value: 25, name: '进行中', itemStyle: { color: '#E6A23C' } },
              { value: 10, name: '未开始', itemStyle: { color: '#909399' } },
            ],
          },
        ],
      })
    } else {
      progressChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: ['已完成', '进行中', '未开始'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              { value: 65, itemStyle: { color: '#67C23A' } },
              { value: 25, itemStyle: { color: '#E6A23C' } },
              { value: 10, itemStyle: { color: '#909399' } },
            ],
            type: 'bar',
          },
        ],
      })
    }

    // 成绩分布图表
    scoreChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'category',
        data: ['0-60', '60-70', '70-80', '80-90', '90-100'],
      },
      yAxis: {
        type: 'value',
        name: '学生人数',
      },
      series: [
        {
          data: [3, 5, 12, 15, 8],
          type: 'bar',
          itemStyle: {
            color: function (params: any) {
              const colorList = ['#F56C6C', '#E6A23C', '#409EFF', '#67C23A', '#67C23A']
              return colorList[params.dataIndex]
            },
          },
        },
      ],
    })

    // 活跃度趋势图表
    const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    const timeData = [2.5, 3.2, 4.1, 3.8, 5.2, 6.7, 4.3]
    const loginsData = [8, 10, 15, 13, 17, 20, 12]
    const resourcesData = [25, 32, 41, 38, 45, 52, 36]

    let activityData
    let activityName

    if (activityMetric.value === 'time') {
      activityData = timeData
      activityName = '在线时长(小时)'
    } else if (activityMetric.value === 'logins') {
      activityData = loginsData
      activityName = '登录次数'
    } else {
      activityData = resourcesData
      activityName = '资源访问量'
    }

    activityChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: days,
      },
      yAxis: {
        type: 'value',
        name: activityName,
      },
      series: [
        {
          name: activityName,
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(128, 255, 165, 0.8)',
              },
              {
                offset: 1,
                color: 'rgba(1, 191, 236, 0.2)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
          data: activityData,
        },
      ],
    })

    // 知识点掌握情况图表
    knowledgeChart.setOption({
      radar: {
        indicator: [
          { name: '数据类型', max: 100 },
          { name: '条件语句', max: 100 },
          { name: '循环结构', max: 100 },
          { name: '函数定义', max: 100 },
          { name: '算法复杂度', max: 100 },
        ],
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              value: [85, 80, 75, 82, 70],
              name: '班级平均',
              areaStyle: {
                color: 'rgba(64, 158, 255, 0.6)',
              },
            },
            {
              value: [95, 90, 88, 92, 75],
              name: '最高分',
              areaStyle: {
                color: 'rgba(103, 194, 58, 0.6)',
              },
            },
          ],
        },
      ],
    })

    // 题型正确率对比图表
    questionTypesChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['班级平均', '最高分'],
      },
      xAxis: {
        type: 'category',
        data: ['选择题', '填空题', '问答题', '编程题'],
      },
      yAxis: {
        type: 'value',
        name: '正确率(%)',
        max: 100,
      },
      series: [
        {
          name: '班级平均',
          type: 'bar',
          data: [85, 78, 65, 60],
          itemStyle: {
            color: '#409EFF',
          },
        },
        {
          name: '最高分',
          type: 'bar',
          data: [95, 90, 85, 82],
          itemStyle: {
            color: '#67C23A',
          },
        },
      ],
    })
  } catch (error) {
    console.error('Error initializing charts:', error)
  }
}

// 监听图表类型变化
watch(progressChartType, () => {
  if (progressChart) {
    initCharts()
  }
})

// 监听活跃度指标变化
watch(activityMetric, () => {
  if (activityChart) {
    initCharts()
  }
})

// 窗口大小变化时调整图表
const handleResize = () => {
  progressChart?.resize()
  scoreChart?.resize()
  activityChart?.resize()
  knowledgeChart?.resize()
  questionTypesChart?.resize()
}

// 生命周期钩子
onMounted(() => {
  console.log(`加载任务ID为 ${taskId} 的分析数据`)

  // 使用setTimeout确保在DOM更新后初始化图表
  setTimeout(() => {
    initCharts()
  }, 300)

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件卸载前清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  progressChart?.dispose()
  scoreChart?.dispose()
  activityChart?.dispose()
  knowledgeChart?.dispose()
  questionTypesChart?.dispose()
})
</script>

<style scoped>
.analysis-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 24px;
  color: #333;
}

.data-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.filter-select {
  width: 160px;
}

.date-range {
  width: 350px;
}

.analysis-overview {
  margin-bottom: 30px;
}

.stat-card {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.stat-content {
  text-align: center;
  margin-bottom: 15px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.trend-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-period {
  color: #909399;
  font-size: 12px;
  margin-left: 5px;
}

.charts-section {
  margin-bottom: 30px;
}

.chart-row {
  margin-top: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.student-performance {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 250px;
}

/* 学生详情样式 */
.student-detail {
  padding: 15px;
}

.student-detail-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.student-avatar {
  margin-right: 25px;
}

.student-info {
  flex: 1;
}

.student-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.student-info p {
  margin: 5px 0;
  color: #606266;
}

.student-stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.stat-item {
  text-align: center;
  min-width: 80px;
}

.knowledge-mastery {
  margin-bottom: 25px;
}

.knowledge-item {
  margin-bottom: 15px;
}

.knowledge-name {
  margin-bottom: 5px;
  font-weight: 500;
}

.recommendation-item {
  margin-bottom: 15px;
}

.student-progress {
  margin-bottom: 25px;
}
</style>
